<template>

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <div class="sc">
    <div class="good-1">
      <div @click="search" class="tu-1">
        <van-icon name="comment-o" size="30" />
      </div>
      <div class="tu-font"><span>美容美妆</span></div>
      <div class="tu-2" @click="good()"><van-icon name="shopping-cart-o" size="30" /></div>
    </div>
    <div class="good-2">
      <div class="svg1">
        <van-icon name="scan" size="30" color="rgba(183, 138, 101, 1)" />
      </div>
      <div class="span"><span>|</span></div>
      <div class="shu"> <el-input style="width:440px;border-radius: 20px;border: solid none;background-color: transparent;" v-model="input" placeholder="请输入内容"></el-input></div>
      
    </div>
    <div class="good-3">
      <div class="jing"><span>极美精选</span></div>
      <div class="lunbo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="../assets/3.jpg" width="100%" height="400px" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/5.jpg"   width="100%" height="400px" alt=""></van-swipe-item>
  <van-swipe-item><img src="../assets/7.jpg"  width="100%" height="400px" alt=""></van-swipe-item>
 
</van-swipe>
</div>
    </div>

    <!--  -->
    <div class="shang">
    <van-grid :border="false" :column-num="3">
  <van-grid-item>
    <van-image @click="xingq()"  width="100%" height="100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.sino98.com%2Fupload%2Farticle%2F20171110%2F99227375721510302309.jpg&refer=http%3A%2F%2Fwww.sino98.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670487237&t=076e47896fcb1a6f4a9b49a7e141bcdf" />
  </van-grid-item>
  <van-grid-item>
    <van-image @click="xingq()" width="100%" height="100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F018bab5dad5a3ba8012163ba21715c.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670487237&t=a53493158b5639f2a7ccc4834a33c9da" />
  </van-grid-item>
  <van-grid-item>
    <van-image @click="xingq()" width="100%" height="100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F200509%2F3-200509152139.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670487237&t=072af78b1573ab37a7cdaf40fc0ad813" />
  </van-grid-item>
   <van-grid-item>
    <van-image @click="xingq()"  width="100%" height="100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.sino98.com%2Fupload%2Farticle%2F20171110%2F99227375721510302309.jpg&refer=http%3A%2F%2Fwww.sino98.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670487237&t=076e47896fcb1a6f4a9b49a7e141bcdf" />
  </van-grid-item>
  <van-grid-item>
    <van-image @click="xingq()" width="100%" height="100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F018bab5dad5a3ba8012163ba21715c.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670487237&t=a53493158b5639f2a7ccc4834a33c9da" />
  </van-grid-item>
  <van-grid-item>
    <van-image @click="xingq()" width="100%" height="100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F200509%2F3-200509152139.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670487237&t=072af78b1573ab37a7cdaf40fc0ad813" />
  </van-grid-item>
  
  
</van-grid>
    </div>
  
    <!-- 推荐 -->
    <div class="tui">
      <div class="span1"><span>推荐</span></div>
      <div class="chan" v-for="arr in list" :key="arr.id">
        <div class="img2"><img @click="xingq()" src="../assets/3.jpg" width="100%" height="170px" style="border-radius: 20px;" alt=""></div>
        <p>{{arr.name}}</p>
        <p style="color:red">￥{{arr.price}}</p>
      </div>
    </div>

  </div>
  </van-pull-refresh>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {

    return {
       isLoading: false,
      list:[
        {name:"护肤美容",price:"666"}
      ],
       input:''
    };
  },
  methods: {
      // 跳转排行榜
    xingq(){
         this.$router.push({ path: "/xingq" });
    },
    // 跳转购物车
    good(){
this.$router.push({ path: "/good" });
    },
    search() {
      this.$router.push({ path: "/search" });
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};

</script>

<style>
.img2{
  width: 170px;
  height: 170px;
  background-color: transparent;
  
}
.chan{
  width: 33%;
  height: 270px;
  float: left;
  background-color: #fff;
  margin-top: 7%;
  margin-left: 5%;
  /* text-align: center; */
  border-radius: 20px;
}
.span1{
  float: left;
  width: 100%;
  background-color: #efecec;
  
}
/* 推荐 */
.tui{
  width: 100%;
  float: left;
  margin-top: 10%;
 
  
  font-size: 20px;
  color: rgba(183, 138, 101, 1);
  height: 100%;
}
.shang{
  width: 100%;
  float: left;
   border-bottom: solid #efecec;
   height: 300px;
   margin-top: 30%;
 
  
}
.lunbo{
 width: 100%;
 float: left;
 border-bottom: 2px #efecec;
}

  /*  */
.jing{
  width: 100%;
  float: left;
  background-color: #efecec;
}
.good-3{
  width: 100%;
  height: 280px;
  float: left;
  background-color: transparent;
  margin-top: 10%;
  border-top: solid #efecec;
  border-bottom: 2px #efecec;
  color: rgba(183, 138, 101, 1);
  font-size: 20px;
 
}
.span{
  float: left;
  margin-top: 10px;
  font-size: 20px;
  
}
.shu{
  float: left;
  margin-left: 5px;
  border: solid none;
  
}
.input-1{
  width: 400px;
  float: right;
  border-radius: 50px;
}
.svg1 {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
}
.good-2 {
  width: 90%;
  height: 40px;
  float: left;
  background-color: transparent;
  border-radius: 20px;
  margin-left: 6%;
  margin-top: 10%;
  border: solid rgba(183, 138, 101, 1);
}
/*  */
.tu-font {
  float: left;
  margin-left: 30%;
}
.tu-1 {
  float: left;
  margin-left: 20px;
  margin-top: 5px;
}
.tu-2 {
  float: right;
  margin-right: 20px;
  margin-top: 5px;
}
.good-1 {
  width: 100%;
  height: 50px;
  float: left;
  background-color: transparent;

  font-size: 25px;
  border-bottom: solid #efecec;
  line-height: 45px;
}
.sc{
  width: 100%;
  height: 1500px;
  float: left;
  background-color: #f9f6f6;
}
</style>